<template>
    
    <div align="center" style="margin: 200px;">
    <h1 style="text-align: center;">用户登录</h1>
    <table border style="text-align: center;width: 400px">
      <tr>
        <td style="font-size: 20px;">用户名:</td>
        <td><input style="width: 300px;height: 30px;" v-model="form.username" /></td>
      </tr>
      <tr>
        <td style="font-size: 20px;">密码:</td>
        <td><input style="width: 300px;height: 30px;" v-model="form.userpwd" 
          type="password" /></td>
      </tr>
      <tr style="width: 150px;height: 60px;">
        <td></td>
        <td>
           <el-button style="width: 150px;height: 40px;font-size: 20px;" type="success"
           @click="Login">登录</el-button>
        </td>
      </tr>
    </table>
  </div>    
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive } from 'vue';

const form = reactive({
  username:'',
  userpwd: '',
})
onMounted(()=>{
  
})
const Login=()=>{
  axios.get('User/Login', {
    params: {
      username:form.username,
      userpwd:form.userpwd
    }
  }).then((ret) => {
    console.log(ret.data)
    localStorage.setItem("username",form.username)
    localStorage.setItem("Token",ret.data.data.token)
    localStorage.setItem("UserId",ret.data.data.gode)
    if(ret.data.data.gode>1){
      ElMessage.success(ret.data.data.message)
      // alert(ret.data.data.token)
      // const headers={
      //   "Authorization":"Bearer " + ret.data.data.token};
      //   axios.get('User/GetAllProvince',{headers}
      //   ).then((ret) => {
      //     console.log(ret.data.data)
      //   })
      router.push('/Main')
    }else{
      ElMessage.error(ret.data.data.message)
    }
  })
}

</script>

<style scoped>

</style>